@system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
  'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;

@shadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

/* The element that displays the keys as the user type them */
#mathlive-keystroke-caption-panel {
  visibility: hidden;
  /*min-width: 160px;*/
  /*background-color: rgba(97, 97, 200, .95);*/
  background: var(--secondary, hsl(var(--hue, 212), 19%, 26%));
  border-color: var(--secondary-border, hsl(0, 0%, 91%));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  text-align: center;
  border-radius: 6px;
  padding: 16px;
  position: absolute;
  z-index: 1;

  display: flex;
  flex-direction: row-reverse;
  justify-content: center;

  // For keystroke caption
  --keystroke: white;
  --on-keystroke: #555;
  --keystroke-border: #f7f7f7;
}
@media (prefers-color-scheme: dark) {
  body:not([theme='light']) #mathlive-keystroke-caption-panel {
    --keystroke: hsl(var(--hue, 212), 50%, 30%);
    --on-keystroke: hsl(0, 0%, 98%);
    --keystroke-border: hsl(var(--hue, 212), 50%, 25%);
  }
}

body[theme='dark'] #mathlive-keystroke-caption-panel {
  --keystroke: hsl(var(--hue, 212), 50%, 30%);
  --on-keystroke: hsl(0, 0%, 98%);
  --keystroke-border: hsl(var(--hue, 212), 50%, 25%);
}
#mathlive-keystroke-caption-panel > span {
  min-width: 14px;
  /*height: 8px;*/
  margin: 0 8px 0 0;
  padding: 4px;

  background-color: var(--keystroke);
  color: var(--on-keystroke);
  fill: currentColor;

  font-family: @system;
  font-size: 1em;
  // text-shadow: 0 1px #fff;
  // letter-spacing: -0.07rem;

  border-radius: 6px;
  border: 2px solid var(--keystroke-border);

  /*box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);*/
  // box-shadow: @shadow1;
}
